<template>
  {{ searchForm }}
  <NvCrud v-model:search-form="searchForm" :option :data @search="handleSearch" />
</template>

<script setup lang="tsx">
import type { NvCrudOption } from 'nv-crud'
import { NvCrud } from 'nv-crud'
import { computed, ref } from 'vue'

const baseUrl = 'https://api.avuejs.com/area'

interface Addr {
  province?: string
  city?: string
  area?: string
}
const searchForm = ref<Addr>({})
function handleSearch(done: () => void) {
  setTimeout(done, 1000)
}

const data: Addr[] = []

const option: NvCrudOption<Addr> = {
  rowActions: false,
  actionbar: false,
  toolbar: false,
  fields: {
    province: {
      title: '省份',
      type: 'select',
      dict: `${baseUrl}/getProvince`,
      search: true,
      props: {
        valueField: 'code',
        labelField: 'name',
      },
    },
    city: {
      title: '城市',
      type: 'select',
      dict: computed(() => `${baseUrl}/getCity/${searchForm.value.province}`),
      search: true,
      props: {
        valueField: 'code',
        labelField: 'name',
      },
    },
    area: {
      title: '地区',
      type: 'select',
      dict: computed(() => `${baseUrl}/getArea/${searchForm.value.city}`),
      search: true,
      props: {
        valueField: 'code',
        labelField: 'name',
      },
    },
  },
}
</script>
